/* eslint-disable */
<template>
  <div class="typeBase editType">
    <div class="row">
      <el-select
        placeholder="选择或搜索类型"
        v-model="typeModal.id"
        value="value"
        @change="editTypeShow"
        size="mini"
        filterable
      >
        <el-option
          v-for="(item) in typesArr"
          :key="item.id"
          :label="item.id + ' ' +item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="row">
      <input class="input" v-model="typeModal.name" placeholder="名称" />
    </div>
    <div class="row pickRRow">
      <div class="title">半径</div>
      <el-slider
        :min="10"
        :max="100"
        size="mini"
        class="rPicker"
        :disabled="typeModal.id===''"
        v-model="typeModal.r"
        type="range"
        :value="typeModal.r"
      ></el-slider>
    </div>
    <div class="divider"></div>
    <div class="row pickColorRow">
      <div class="title">颜色</div>
      <el-input
        size="mini"
        class="colorPicker"
        :disabled="typeModal.id===''"
        v-model="typeModal.color"
        type="color"
      ></el-input>
    </div>
    <div class="row">
      <el-button class="el-button" size="mini" v-on:click="wantModifyType">修改</el-button>
    </div>
    <div class="row">
    <el-button class="el-button" size="mini" type="danger" v-on:click="wantDeleteType">删除</el-button>
  </div>
  </div>
</template>

<script>

import { modifyTypeAPI,deleteTypeAPI } from "@/api/kgeditor/typeeditor";

export default {
  name: "editTypeComponent",
  data(){
    return {
      selectedType:{},
      typeModal: {
        id: "",
        name: "",
        color: "",
        r:"",

        colorChanged: false,
        rChanged: false
      },
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
      typesArr: []
    }
  },
  created() {
    this.typesArr = this.KG.kgInfo.typeList;
  },
  watch: {
    "KG.update.typeList": {
      handler:function() {
        this.typesArr = this.KG.kgInfo.typeList;
      },
      deep:true
    }
  },
  methods: {
    editTypeShow(){
      this.selectedType = this.KG.getTypeById(this.typeModal.id);
      if(this.selectedType == null){
        this.$message.error("找不到类型实体,请刷新页面或重新加载数据");
      } else{
        this.typeModal.name = this.selectedType.name;
        this.typeModal.color = this.selectedType.color;
        this.typeModal.r = this.selectedType.r;
      }
    },
    wantModifyType() {
      let _this = this;
      if(this.selectedType == null) {
        this.$message.error("找不到类型实体,请刷新页面或重新加载数据");
        return;
      }
      if(this.typeModal.id===''){
        this.$message.warning("请先选择类型");
        return;
      }

      let namedType = this.KG.getTypeByName(this.typeModal.name);
      if(namedType!=null && this.selectedType.id!=namedType.id){
        this.$message.warning("类型已经名称存在，请换一种名称");
        return;
      }

      let confirmMessage = "";

      if(this.typeModal.name!="" && this.typeModal.name != this.selectedType.name){
        confirmMessage += '<div><b>名称:</b> "' + _this.selectedType.name + '"->"' + this.typeModal.name + '";</div>';
      }
      else this.typeModal.name = this.selectedType.name;

      if(this.selectedType.color != this.typeModal.color){
        confirmMessage += '<div><b>颜色:</b> "' + _this.selectedType.color + '"->"' + this.typeModal.color + '";</div>';
        this.typeModal.colorChanged = true;
      }
      else {
        this.typeModal.color = this.selectedType.color;
        this.typeModal.colorChanged = false;
      }

      if(this.selectedType.r != this.typeModal.r){
        confirmMessage += '<div><b>半径:</b> "' + _this.selectedType.r + '"->"' + this.typeModal.r + '";</div>';
        this.typeModal.rChanged = true;
      }
      else {
        this.typeModal.r = this.selectedType.r;
        this.typeModal.rChanged = false;
      }

      if(confirmMessage==""){
        this.$message.warning("没有做出任何修改");
        return;
      }

      this.$confirm(confirmMessage+"做出以上修改，是否继续?", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.modifyType();
      });

    },
    modifyType(){ //修改类型
      let _this = this;
      modifyTypeAPI({
        id: _this.typeModal.id,
        type: _this.typeModal.name,
        color: _this.typeModal.colorChanged?
          _this.typeModal.color:
          (_this.typeModal.selfColor?_this.typeModal.selfColor:""),
        radius: _this.typeModal.rChanged?
          _this.typeModal.r:
          (_this.typeModal.selfR?_this.typeModal.selfR:""),
        kgID: _this.KG.kgInfo.id
      },function() {
        _this.KG.modifyType(_this.selectedType,_this.typeModal);
        _this.$message.success("类型编辑成功");
        _this.selectedType.name = _this.typeModal.name;
        _this.selectedType.r = _this.typeModal.r;
        _this.selectedType.color = _this.typeModal.color;
      },function(error) {
        _this.$message.error("类型编辑失败:" + error);
      },()=>{});

    },
    wantDeleteType(){
      if(this.typeModal.id===''){
        this.$message.warning("请先选择类型");
        return;
      }
      this.$confirm("删除类型将会同时删除当前类型的所有节点，是否继续？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.deleteType();
      });
    },
    deleteType(){
      let _this = this;
      deleteTypeAPI({
        id:_this.typeModal.id,
        kgID:_this.KG.kgInfo.id
      },function() {
        _this.KG.deleteTypeById(_this.typeModal.id);
        _this.$message.success("删除类型成功");
        _this.typeModal.name="";
        _this.typeModal.id="";
        _this.typeModal.color=null;
        _this.typeModal.r=30;
      },function(error) {
        _this.$message.error("删除类型失败:"+error);
      },()=>{});
    }
  }
};
</script>

<style scoped>

.divider {
  height: 0.5px;
  background-color: #f5f5f5;
}

.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}
</style>
